<template>
  <div>
    <h1>Reactive Proxy vs. Original</h1>
    <p>值得注意的是，reactive() 返回的是一个原始对象的 Proxy，它和原始对象是不相等的：</p>
  </div>
</template>
<script lang="ts">
export default {
  name: 'Study3StuDemo2'
}
</script>
<script setup lang="ts">
import { reactive } from 'vue'

let raw = { name: '张长春' } // raw

let raw2 = {}

console.log(raw === raw2, 'raw === raw2') //false: 即使它们都是空对象，它们在内存中的地址是不同的，所以 raw === raw2 的结果是 false。

let proxy = reactive(raw) //  包装的raw

console.log(raw === proxy) // reactive() 返回的是一个原始对象的 Proxy，它和原始对象是不相等的

// 在同一个对象上调用 reactive() 会返回相同的代理
console.log(reactive(raw) === proxy, 'reactive(raw) === proxy') // true

let proxy2: any = reactive(raw)

let proxy3 = reactive(JSON.parse(JSON.stringify(raw)))

proxy2.name = '廖文静'

console.log(proxy2, 'proxy2')
console.log(proxy, 'proxy')
console.log(proxy3, 'proxy3')

// 在一个代理上调用 reactive() 会返回它自己
console.log(reactive(proxy) === proxy) // true

proxy2.next = raw2

let num = 3
proxy2.next2 = num
console.log(proxy2.next2 === num, 'proxy2.next2  === num') // num 不是引用类型不会包装
console.log(proxy2.next === raw2, 'proxy2.next === raw2') // raw2 是引用类型，会用 reactive 再包装
console.log(proxy2.next)
</script>

<style></style>
